﻿<doctype html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery实现图片翻牌旋转特效</title>
		<style>
			*{margin:0px;padding:0px;}
			li{list-style:none;}
			#brand{
				width:330px;
				height:400px;
				border:1px solid #dddddd;
				box-shadow:0px 0px 5px #dddddd;
				margin:30px auto;
			}
			#brand .title{
				width:100%;
				height:35px;
				line-height:35px;
				font-size:16px;
				margin-top:4px;
				border-bottom:2px solid #33261c;
				text-align:center;
				color:#33261c;
			}
			#brand .bd-box{
				width:284px;
				height:358px;
				overflow:hidden;
				padding:0px 24px;
			}
			#brand .bd-box li{
				float:left;
				width:122px;
				height:77px;
				overflow:hidden;
				position:relative;
				margin:10px 10px 0px 10px;
			}
			#brand .bd-box li img{
				width:120px;
				height:75px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:0px;
				z-index:2;
				overflow:hidden;
			}
			#brand .bd-box li span{
				width:120px;
				height:0px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:38px;
				z-index:1;
				text-align:center;
				line-height:75px;
				font-size:14px;
				color:#FFF;
				background:#ffa340;
				font-weight:bold;
				overflow:hidden;
				display:none;
			}
			#brand .bd-box li a{
				width:120px;
				height:75px;
				position:absolute;
				left:0px;
				top:0px;
				z-index:3;
			}
		</style>
		<script src="js/jquery-1.11.2.js"></script>
		<script>
		$(function(){
			/*
				图片反转
					1、鼠标移入
						1）图片高度变为0，top值变为38
						2）图片动画完成后，文字高度从0变为75, top值变为0
					2、鼠标移出
						1）文字高度变为0, top值变为38
						2）文字动画完成后，图片高度改为75，投票值变为0
			 */
			/*$('.bd-box').on('mouseenter','li',function(){
				// 获取元素
				var $img = $(this).children('img');
				var $txt = $(this).children('span');

				// 1）图片高度变为0，top值变为高度的一半
				$img.animate({height:0,top:38,opacity:0},function(){
					// 2）图片动画完成后，文字高度从0变为75, top值变为0
					$txt.animate({height:75,top:0,opacity:1});
				});
			}).on('mouseleave','li',function(){
				// 获取元素
				var $img = $(this).children('img');
				var $txt = $(this).children('span');

				$txt.animate({height:0,top:38,opacity:0},function(){
					$img.animate({height:75,top:0,opacity:1});
				})
			});*/

			$('.bd-box li').hover(function(){
				// 获取元素
				var $img = $(this).children('img');
				var $txt = $(this).children('span');

				// 1）图片高度变为0，top值变为高度的一半
				$img.animate({height:0,top:38,opacity:0},function(){
					// 2）图片动画完成后，文字高度从0变为75, top值变为0
					$txt.animate({height:75,top:0,opacity:1});
				});
			},function(){
				// 获取元素
				var $img = $(this).children('img');
				var $txt = $(this).children('span');

				$txt.animate({height:0,top:38,opacity:0},function(){
					$img.animate({height:75,top:0,opacity:1});
				});
			})
		})
		</script>
	</head>
	<body>
		<div id="brand">
			<div class='title'>
				热门品牌推荐
			</div>
			<ul class='bd-box'>
				<li>
					<a href="#"> </a>
					<img src="images/1.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/2.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/3.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/4.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/5.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/6.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/7.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/8.jpg" />
					<span>肌龄</span>
				</li>
			</ul>
		</div>
		
	</body>
</html>


